<template>
  <div class="form">
    分类/分类管理
    <el-tree
      :data="categoryList"
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
    >
      <div class="custom-tree-node" slot-scope="{ node, data }">
        <el-button v-if="data.state == 1" type="text" class="node">{{
          data.name
        }}</el-button>
        <span>
          <el-button
            class="button"
            v-if="data.level == 1 && data.state == 1"
            type="text"
            size="mini"
            @click="() => add(data)"
          >
            Add
          </el-button>
          <el-button
            class="button"
            v-if="data.state == 1"
            type="text"
            size="mini"
            @click="() => edit(data)"
          >
            Edit
          </el-button>
          <el-button
            class="button"
            v-if="data.children.length == 0 && data.state == 1"
            type="text"
            size="mini"
            @click="() => visible(node, data)"
          >
            Delete
          </el-button>
        </span>
      </div>
    </el-tree>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>确定删除该条数据吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="remove">确 定</el-button>
      </span>
    </el-dialog>
    <CategoryEdit @load="getList" ref="Editer"></CategoryEdit>
  </div>
</template>

<script>
import CategoryEdit from "./categoryEdit.vue";

export default {
  name: "categoryCategory",
  components: { CategoryEdit },
  data() {
    return {
      categoryList: [],
      dialogVisible: false,
      indexId: "",
    };
  },
  methods: {
    add(row) {
      let category = this.getCategory()
      this.$refs.Editer.add(row,category);
    },
    edit(row) {
      let category = this.getCategory()
      this.$refs.Editer.edit(row,category);
    },
    getCategory() {
      let category = [];
      for (let i = 0; i < this.categoryList.length; i++) {
        let obj = {}
        obj.id = this.categoryList[i].id
        obj.title = this.categoryList[i].name
        category.push(obj)
      }
      return category
    },
    //获取列表
    getList() {
      this.$http({
        url: "/admin/category",
      }).then((res) => {
        if (!res.errorMsg) {
          //排序，吧level为1的排在前面
          res.sort((a, b) => {
            return a.level - b.level;
          });
          let obj = {};
          for (var i = 0; i < res.length; i++) {
            res[i].children = []; //为res添加一个空数组以便存放二级数据
            let parentId = res[i].parentId;
            let id = res[i].id;
            let state = res[i].state;
            obj[id] = res[i];
            //如果当前遍历向中有parentId，没有被逻辑删除，而且obj键为parentId中对应有值，就说明当前项属于obj的parentid为主键中的一个children
            if (parentId && obj[parentId] && state == 1) {
              //那就向对象的children中添加数据
              obj[parentId].children.push(res[i]);
            }
          }
          let categoryList = []; //定义最后的数组数据
          for (let key in obj) {
            //如果等级为1，那就为将数据添加到categoryList中去
            if (obj[key].level == 1 && obj[key].state == 1) {
              categoryList.push(obj[key]);
            }
          }
          this.categoryList = categoryList;
        } else {
          console.log(res.errorMsg);
        }
      });
    },
    visible(node, data) {
      this.indexId = "";
      this.dialogVisible = true;
      this.indexId = data._id;
    },
    //删除一条数据
    remove() {
      let indexId = this.indexId;
      this.$http({
        url: "/admin/delete",
        method: "DELETE",
        data: {
          indexId,
          form: "category",
        },
      }).then((res) => {
        if (!res.errorMsg) {
          this.getList();
          this.$message({
            type: "success",
            message: "删除成功",
          });
          this.dialogVisible = false;
        } else {
          this.$message({
            type: "success",
            message: res.errorMsg,
          });
        }
      });
    },
  },
  created() {
    this.getList();
  },
  mounted() {},
};
</script>
  
<style scoped>
.form {
  margin-left: 80px;
  margin-top: 100 px;
}
.custom-tree-node {
  font-size: 14px;
  padding-right: 8px;
}

.button {
  margin-left: 30px;
}
</style>